<template>
  <div>
      <div class="com-top-nav">
        <van-nav-bar
        title="发布"
         right-text="发布新任务"
         @click-right="onClickRight"
      />
      </div>
       <div>
        <van-tabs v-model="active">
        <van-tab v-for="index in 3" :title="title[index-1]" :key="index">
           <div style="background:#F8FAFE;" v-show="active==0" workbench-ask-list>
                <div style="margin-bottom: 40px;background:#fff;" v-for="aTask in dataList" :key="aTask.id">
                  <div class="item">
                    <div class="cell">
                      <img :src="aTask.headimgurl?aTask.headimgurl:'/static/img/no.jpg'" alt="">
                      <div class="text">
                        <h3>{{aTask.uname}}</h3>
                        <span>{{aTask.type}}</span>
                      </div>
                    </div>
                    <i>{{aTask.showprice}}</i>
                  </div>
                  <div class="center">
                    <div>
                       <p>{{aTask.name}}</p>
                      <p>要求：{{aTask.describe}}</p>
                      <p>任务周期：{{aTask.time}}</p>
                    </div>
                  </div>
                  <div class="bottom">
                    <span>你的任务还在报名阶段~</span>
                    <router-link :to="{name:'registrationList',query:{taskid:aTask.id}}">报名列表</router-link>
                  </div>
                </div>

            </div>

             <div style="background:#F8FAFE;" v-show="active==1" workbench-ask-list>
                <div style="margin-bottom: 40px;background:#fff;" v-for="aTask in dataList1" :key="aTask.id">
                  <div class="item">
                    <div class="cell">
                      <img :src="aTask.headimgurl?aTask.headimgurl:'/static/img/no.jpg'" alt="">
                      <div class="text">
                        <h3>{{aTask.uname}}</h3>
                        <span>{{aTask.type}}</span>
                      </div>
                    </div>
                    <i>{{aTask.showprice}}</i>
                  </div>
                  <div class="center">
                    <div>
                       <p>{{aTask.name}}</p>
                      <p>要求：{{aTask.describe}}</p>
                      <p>任务周期：{{aTask.time}}</p>
                    </div>
                  </div>
                  <div class="bottom">
                    <span>你的任务还在进行阶段</span>
                    <div @click="clickHandel(aTask.id)">点击完成</div>
                  </div>
                </div>

            </div>

             <div style="background:#F8FAFE;" v-show="active==2" workbench-ask-list>
                <div style="margin-bottom: 40px;background:#fff;" v-for="aTask in dataList2" :key="aTask.id">
                  <div class="item">
                    <div class="cell">
                      <img :src="aTask.headimgurl?aTask.headimgurl:'/static/img/no.jpg'" alt="">
                      <div class="text">
                        <h3>{{aTask.uname}}</h3>
                        <span>{{aTask.type}}</span>
                      </div>
                    </div>
                    <i>{{aTask.showprice}}</i>
                  </div>
                  <div class="center">
                    <div>
                       <p>{{aTask.describe}}</p>
                      <p>要求：{{aTask.describe}}</p>
                      <p>任务周期：{{aTask.time}}</p>
                    </div>
                  </div>
                  <div class="bottom">
                    <span>恭喜您，该任务已完成啦~</span>
                    <a>已完成</a>
                  </div>
                </div>

            </div>
        </van-tab>
      </van-tabs>
      </div>
      <bottom-person-nav/>
  </div>
</template>
<script>
import bottomNav from "../components/person-nav.vue";
import Vue from "vue";
import { NavBar, Tab, Tabs } from "vant";

Vue.use(NavBar)
  .use(Tab)
  .use(Tabs);

Vue.use(NavBar);
export default {
  data() {
    return {
      active: 0,
      title: ["已报名","进行中","已完成"],
      dataList: [],
      dataList1: [],
      dataList2: [],
    };
  },
  created() {
      this.init()
  },
  components: {
    "bottom-person-nav": bottomNav
  },
  methods: {
    onClickRight() {
      this.$router.push({ name: "editingTasks" });
    },
    init(){
      this.axios.get(
        "/api/task/sigin", {
          params: {
            uid:JSON.parse(sessionStorage.getItem('user')).uid
          }
        })
        .then(res => {
          this.dataList = res.data.data;
          //console.log(res.data.data);
        });
      this.axios.get(
        "/api/task/doing", {
          params: {
            uid:JSON.parse(sessionStorage.getItem('user')).uid
          }
        })
        .then(res => {
          this.dataList1 = res.data.data;
          //console.log(res.data.data);
        });
      this.axios.get(
        "/api/task/finish", {
          params: {
            uid:JSON.parse(sessionStorage.getItem('user')).uid
          }
        })
        .then(res => {
          this.dataList2 = res.data.data;
          //console.log(res.data.data);
        });
    },
     clickHandel(id){
    this.axios.get('/api/task_finish_second',{params:{uid:JSON.parse(sessionStorage.getItem('user')).uid,taskid:id}}).then(res=>{
      if(res.data.err_code == 0){
            this.$toast({message:'你已同意完成'})
            this.axios.get(
          "/api/task/finish", {
            params: {
              uid:JSON.parse(sessionStorage.getItem('user')).uid
            }
          })
          .then(res => {
            this.dataList2 = res.data.data;
            this.init()
            this.$router.go(0)
            //console.log(res.data.data);
          });
      }else{
        this.$toast({message:res.data.data})

      }
    })
  }
  },

};
</script>

<style lang="less" scope>
@import url("../../static/style/bottom-person-nav.less");
.demo-color-btn {
  margin: 8px;
}
[workbench-ask-list] {
  border-radius: 8px;
  margin-left: 10px;
  margin-right: 10px;

  margin-top: 44px;
  margin-bottom: 80px;
  background: #fff;
  position: relative;
  .item {
    padding-top: 5px;
    padding-bottom: 10px;
    display: flex;
    position: relative;
    i {
      font-style: normal;
      margin-right: 10px;
      padding-top: 30px;
      color: #ff5733;
    }

    border-bottom: 1px solid #eee;

    justify-content: space-between;
    .cell {
      .text {
        padding-left: 80px;
        span {
          font-size: 10px;
          background: #00baad;
          color: #fff;
          padding: 2px 4px;
          border-radius: 3px;
        }
      }
      img {
        position: absolute;
        top: -20px;
        left: 10px;
        height: 64px;
        width: 64px;
        border-radius: 50%;
      }
    }
  }
  .center {
    div {
      p {
        position: relative;
        color: #555;
        font-size: 13px;
        line-height: 18px;
        text-indent: 15px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      p:nth-child(1)::before {
        content: "";
        display: block;
        left: 5px;
        top: 50%;
        margin-top: -3px;
        height: 6px;
        width: 6px;
        border-radius: 50%;
        background: #e5e5e5;
        position: absolute;
      }
      p:nth-child(2)::before {
        content: "";
        display: block;
        left: 5px;
        top: 50%;
        margin-top: -3px;
        height: 6px;
        width: 6px;
        border-radius: 50%;
        background: #ffc300;
        position: absolute;
      }
      p:nth-child(3)::before {
        content: "";
        display: block;
        left: 5px;
        top: 50%;
        margin-top: -3px;
        height: 6px;
        width: 6px;
        border-radius: 50%;
        background: #ff5733;
        position: absolute;
      }
    }
  }
  .bottom {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #a6a6a6;
    a {
    }
  }
}
</style>
